<template>
    <!-- 背景 -->
    <view class="bg">
        <!-- wrap: “包裹、环绕”  -->
        <view class="wrap">
            <!-- flex的包围容器 -->
            <view class="container">	
				<!-- 顶部安全区域占位 -->
				<view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view>
                <!-- 顶部 -->
                <view class="header">	
                    <!-- 左边 -->
                    <view class="logo">
                        <image src="@/static/logo_hiack.png"></image>
                    </view>

                </view>

                <!-- 中上主图   banner-->
                <view class="page-gradient ">
    

                </view>



                <!-- 中下功能区-->
                <!-- <view class="info"></view> -->
				



                <!-- 脚部 -->
                <!-- <view class="foot"></view> -->


				
				
				
				
            </view>
			
        </view>

        <!-- 波浪分隔（方案一：SVG，固定在彩色背景底部） -->
       <view class="wave-separator">
          <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
            <path d="M0,60 C220,10 480,110 720,60 C980,15 1220,105 1440,60 L1440,120 L0,120 Z" fill="#ffffff"></path>
          </svg>
        </view>
		
    </view>

    <!-- 自定义底部导航栏 -->
    <customtabbar ></customtabbar>
	
	
	
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 引入自定义底部导航栏组件
import customtabbar from "@/components/customtabbar/customtabbar.vue";
import { ref } from 'vue';




</script>

<style>
/* 背景样式设置 */
.bg {
        width: 100%;
        height: 30vh;
        background-image: 
            radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
            radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
            radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
            radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
        background-size: 
            130vmax 130vmax, 
            80vmax 80vmax, 
            90vmax 90vmax, 
            110vmax 110vmax, 
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax, 
            60vmax -30vmax, 
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
        background-repeat: no-repeat;
        animation: 3s movement linear infinite;
        position: relative;
        top: 0;
        left: 0;
        z-index: 0;
}
/* 背景动画关键帧 */
@keyframes movement {
        0%,
        100% {
            background-size: 
                130vmax 130vmax, 
                80vmax 80vmax, 
                90vmax 90vmax, 
                110vmax 110vmax, 
                90vmax 90vmax;
            background-position:
                -80vmax -80vmax, 
                60vmax -30vmax, 
                10vmax 10vmax,
                -30vmax -10vmax, 
                50vmax 50vmax;
        }
        25% {
            background-size: 
                100vmax 100vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                60vmax 60vmax;
            background-position:
                -60vmax -90vmax, 
                50vmax -40vmax,
                0vmax -20vmax,
                -40vmax -20vmax,
                40vmax 60vmax;
        }
        50% {
            background-size:
                80vmax 80vmax, 
                110vmax 110vmax, 
                80vmax 80vmax, 
                60vmax 60vmax, 
                80vmax 80vmax;
            background-position:
                -50vmax -70vmax, 
                40vmax -30vmax, 
                10vmax 0vmax, 
                20vmax 10vmax, 
                30vmax 70vmax;
        }
        75% {
            background-size: 
                90vmax 90vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                70vmax 70vmax;
            background-position:
                -50vmax -40vmax, 
                50vmax -30vmax, 
                20vmax 0vmax,
                -10vmax 10vmax, 
                40vmax 60vmax;
        }
}
/* 背景伪元素样式 */
/* .bg::after {
        width: 100%;
        height: 100%;
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: -2;
} */

/* 外部包围|顶层样式设置 */
.wrap{
    width: 100%;
    min-height: 80vh; /* 内容高度可根据需求调整，建议与背景高度互补 */
    position: relative; /* 相对定位，作为内容层级基准 */
    z-index: 1; /* 层级高于背景（z-index:0），确保内容不被遮挡 */
}
/* 容器样式设置 */
.container{
        width: 90%;
        min-height: 80vh;
        margin: auto;
        /* background-color: yellowgreen; */
}
	
/* 顶部占位符 */
.navbar{
/* 		background-size: cover;	
		position:relative; display:flex;
		flex-direction:column; */
		/* padding-top:20px; */
		/* z-index: 3; */
		/* background-color: green; */
        height: 0;
}
	
	
/* 头部样式设置 */
.header{
        /* background-color: grey; */
        width: 100%;
        height: 100rpx;
        margin-top: 40rpx;	
        display: flex;
        align-items: center;
        justify-content: space-between	
    }

/* 头部 logo 样式 */
.logo{
        width: 270rpx;
        height: 100rpx;
    }

/* 头部 logo 图片样式 */
.logo image{
        width: 100%;
        height: 100%;
        /* 平铺 */
    }

/* 头部角色图标样式 */
.role{
        width: 100rpx;
        height: 100rpx;
    }

/* 头部角色图标图片样式 */
.role image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 身体样式设置——大图 */
.banner{
        width: 100%;
        height: 700rpx;
        margin-top: 40rpx;
        /* background-color: aquamarine; */
    }

/* 身体大图图片样式 */
.banner image{
        width: 100%;
        height: 100%;
        /* 平铺？  占满？   flex的属性？ */
        object-fit: cover;
    }

/* 身体样式设置——选项卡*/
.info{
        width: 100%;
        height: 550rpx;
        border-radius: 60rpx;/* 圆角 */
        /* background-color:black; */
        /* 透明 */
        background-color: rgba(255, 255, 255, 0.2);
        /* margin-top: 40rpx; */
        display: flex;
        /* 设置主轴方向 */
        flex-direction: row;
        /* 在主轴方向的对齐方式 */
        justify-content: space-around;
        flex-wrap: wrap;
    }

/* 选项栏容器 */
.info_item{
        /* background-color: aquamarine; */
        width: 30%;
        height: 40%;
        /* margin: auto; */
        /* background-color: rgba(255, 255, 255, 0.5); */
        display: flex;		
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        justify-content: space-around;
        padding: 15rpx;
        /* 圆角 */
        border-radius: 80rpx;
        transition: all 0.3s ease;
    }

/* 分享按钮悬停特效 */
.info_item:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

/* 放icon的容器 */
.icon{
        width: 200rpx;
        height: 200rpx;	
    }

/* icon图片本身 */
.icon image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 自定义字体 */
@font-face {
        font-family: 'fontali'; 
        src:url('@/static/font/DingTalk-JinBuTi.woff') format('woff');
}

/* 选项卡文字样式 */
.text{
        /* flex的项目属性,1代表一个参数属性flex是简写:按剩余空间弹性扩展 */
        flex:1;
        color: cadetblue;
        padding-left: 20rpx;
        font-family: 'fontali';  
}

/* 脚部样式设置 */
.foot{
        width: 100%;
        height: 80rpx;
        position: absolute;
        bottom: 70rpx; 
}

/* 底部栏样式 */
.footer {
        background-color: black;
        text-align: center;
        /* padding: 20rpx 0; */
}

/* 底部栏分割线样式 */
.footer-divider {
        width: 45%;
        height: 1rpx;
        background-color: #ccc;
        margin: 10rpx auto;
}		

/* 底部栏图标容器样式 */
.footer-icons {
        display: flex;
        justify-content: center;
        margin-bottom: 1rpx;
}		

/* 底部栏图标样式 */
.footer-icon {
        width: 40rpx;
        height: 40rpx;
        margin: 0 10rpx;
    }		

/* 底部栏版权信息样式 */
.footer-copyright {
        font-family: 'Roboto', sans-serif; /* 使用Roboto字体，你可以替换为其他你喜欢的字体 */
        font-size: 12px;
        letter-spacing: 1.7px; /* 增加字母间距 */
        line-height: 1.8; /* 增加行高，实现上下间距更大 */
        color: #cfcfcf;
    }
    
/* 波浪分隔样式（方案一） */
.wave-separator{
        width: 100%;
        height: 120rpx;
        overflow: hidden;
        line-height: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        pointer-events: none;
}
.wave-separator svg{
        display: block;
        width: 100%;
        height: 100%;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>